<template>
  <div class="head">
    <div class="cont w1200">
      <div class="logo" @click="goHome()">
        <img src="../../assets/img/logo.png" alt="">
      </div>
      <div class="search">
        <div class="left">
          <img src="../../assets/img/search.png" alt="">
          <input type="text" placeholder="请输入搜索内容">
        </div>
        <div class="right">
          搜索
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="w1200">
        <div class="menu-group">
          <a class="item" v-for="item in menuList" :class="{'active':item.id == currentId}"  @click="goMenuItem(item.id)">
            {{ item.name }}
          </a>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import { getMenu } from "@/api/website";

export default {
  name: 'Header',
  data() {
    return {
      menuList: [],
      currentId: 1
    }
  },
  created() {
    this.getList();
    let route = this.$router.currentRoute.path;
    if (route.includes("index")) {
      this.currentId = 2
    } else if (route.includes("situation")) {
      this.currentId = 3
    } else if (route.includes("news")) {
      this.currentId = 4
    } else if (route.includes("cloumn")) {
      this.currentId = 5
    } else if (route.includes("net")) {
      this.currentId = 6
    } else if (route.includes("trends")) {
      this.currentId = 7
    }
  },
  methods: {
    getList() {
      if(localStorage.getItem("menu") ){
        this.menuList = JSON.parse(localStorage.getItem("menu"))
        return
      }else{
        getMenu({ id: 1 }).then(response => {
        this.menuList = response.data;
        localStorage.setItem("menu",JSON.stringify(this.menuList))
        this.loading = false;
      });
      }

    },
    goHome() {
      this.$router.push('/portal/index');
    },
    goMenuItem(id) {
      if (id == 2) {
        this.$router.push('/portal/index');
      } else if (id == 3) {
        this.$router.push('/portal/situation');
      } else if (id == 4) {
        this.$router.push('/portal/news');
      } else if (id == 5) {
        this.$router.push('/portal/cloumn');
      } else if (id == 6) {
        this.$router.push('/portal/net');
      } else if (id == 7) {
        this.$router.push('/portal/cloumn');
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
